<template>
  <div class="zabbix-dashboard">
    <div class="page-header">
      <h1>Zabbix监控</h1>
      <p>Zabbix监控系统管理界面</p>
    </div>

    <div class="dashboard-content">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <el-icon><Monitor /></el-icon>
              <span>监控主机</span>
            </div>
            <div class="card-content">
              <div class="metric-value">--</div>
              <div class="metric-label">台</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <el-icon><Warning /></el-icon>
              <span>告警数量</span>
            </div>
            <div class="card-content">
              <div class="metric-value">--</div>
              <div class="metric-label">条</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <el-icon><CircleCheck /></el-icon>
              <span>正常主机</span>
            </div>
            <div class="card-content">
              <div class="metric-value">--</div>
              <div class="metric-label">台</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <el-icon><CircleClose /></el-icon>
              <span>异常主机</span>
            </div>
            <div class="card-content">
              <div class="metric-value">--</div>
              <div class="metric-label">台</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>功能模块</span>
              </div>
            </template>
            <div class="function-modules">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="module-item">
                    <el-icon size="48"><Monitor /></el-icon>
                    <h3>主机监控</h3>
                    <p>查看和管理监控主机</p>
                    <el-button type="primary" disabled>开发中</el-button>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="module-item">
                    <el-icon size="48"><Bell /></el-icon>
                    <h3>告警管理</h3>
                    <p>查看和处理系统告警</p>
                    <el-button type="primary" disabled>开发中</el-button>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="module-item">
                    <el-icon size="48"><TrendCharts /></el-icon>
                    <h3>性能图表</h3>
                    <p>查看性能监控图表</p>
                    <el-button type="primary" disabled>开发中</el-button>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="module-item">
                    <el-icon size="48"><Setting /></el-icon>
                    <h3>配置管理</h3>
                    <p>管理监控配置</p>
                    <el-button type="primary" disabled>开发中</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { 
  Monitor, 
  Warning, 
  CircleCheck, 
  CircleClose, 
  Bell, 
  TrendCharts, 
  Setting 
} from '@element-plus/icons-vue'

// 页面数据
const loading = ref(false)

// 组件挂载时初始化
onMounted(() => {
  // 这里可以添加数据获取逻辑
  console.log('Zabbix Dashboard 组件已挂载')
})
</script>

<style scoped>
.zabbix-dashboard {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.dashboard-card {
  text-align: center;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: bold;
  color: #303133;
}

.card-content {
  margin-top: 16px;
}

.metric-value {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  line-height: 1;
}

.metric-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.function-modules {
  padding: 20px 0;
}

.module-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 8px;
  transition: all 0.3s;
}

.module-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.module-item h3 {
  margin: 16px 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.module-item p {
  margin: 0 0 16px 0;
  color: #606266;
  font-size: 14px;
}
</style>
